import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Drawer,
  Form,
  Input,
  Popconfirm,
  Radio,
  Row,
  Select,
  Tabs, Tree,
} from 'antd';
import { DivFooter, LFlexHDiv } from '@/components/MHtmlTag';
import MFormItem from '../MFormItem';
import {
  FormItem4Input,
  FormItem4Select,
  FormItem4Radio,
  FormItem4DatePicker,
  FormItem4InputNumber,
} from '../MCols';
import moment from 'moment';
import EndoscopeDetail from "@/pages/DataMerger/DetailedDataReportingFlib/EndoscopeDetail";
import {njzdDetailSwitch} from "@/defaultSettings";

const { TabPane } = Tabs;
const { TextArea } = Input;
const { TreeNode } = Tree;

/**
 * 编辑页面
 */
@Form.create()
class DetailView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
      // 内镜诊断被选中的tab
      njActiveKey: '1',
      // 报告单存放地址
      reportFilePath: '',
      // 报告单url访问地址
      reportFileUrl: '',
      // 病理报告单url访问地址
      blReportFileUrl: '',
      // 病理报告单存放地址
      blReportFilePath: '',
      // 是否正在上传
      isUploading: false,
    };
  }

  componentDidMount() {
    const { record } = this.props;
    const { reportFilePath, reportFileUrl, blReportFileUrl, blReportFilePath } = record;
    this.setState({
      reportFilePath,
      reportFileUrl,
      blReportFileUrl,
      blReportFilePath,
    });
  }

  render() {
    const {
      onClose,
      record,
      sg,
      bm,
      w,
      form,
      visible = false,
      // 食管病理诊断代码
      sgblCode,
      // 是否活检
      isHj,
      // 十二指肠病理诊断代码
      sezccode,
      // 是否无痛
      ache,
      // 对象来源
      zldxLy,
      // 染色类别
      dye,
      // Hp检测结果
      Hp,
      // Hp检测方法
      hpjcjg,
      // 贲门病理诊断代码
      bmblCode,
      // 胃病理诊断代码
      wblCode,
      //性别
      xbcode,
      //内镜诊疗
      zlFs,
      //是否有错误
      isHaveError
    } = this.props;
    // 从state中获取参数
    const { activeKey } = this.state;
    const { extFlag2 } = record;
    return (
      <Drawer
        title="详情"
        placement="right"
        width={'70%'}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        <Tabs defaultActiveKey={activeKey} onChange={this.handleTabChange}>
          <TabPane tab="基本信息" key="1"></TabPane>
          <TabPane tab="内镜信息" key="2"></TabPane>
          <TabPane tab="病理信息" key="3"></TabPane>
          {extFlag2 != njzdDetailSwitch ? <TabPane tab="内镜诊断详情" key="4"></TabPane> : null}
        </Tabs>

        <Card bordered={true} style={{ marginBottom: '64px' }}>
          {/*基本信息*/}
          <Row gutter={16} style={{ display: activeKey === '1' ? 'block' : 'none' }}>
            <FormItem4Input
              form={form}
              label={'门诊号'}
              fieldName={'mzh'}
              required={false}
              initialValue={record ? record['mzh'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'住院号'}
              fieldName={'zyh'}
              required={false}
              initialValue={record ? record['zyh'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'姓名'}
              fieldName={'name'}
              required={false}
              initialValue={record ? record['name'] : ''}
            ></FormItem4Input>
            <FormItem4Radio
              form={form}
              label={'性别'}
              fieldName={'sex'}
              required={false}
              initialValue={record ? record['sex'] : ''}
              items={xbcode}
            ></FormItem4Radio>
            <FormItem4InputNumber
              form={form}
              label={'年龄'}
              min={1}
              max={99}
              fieldName={'age'}
              required={false}
              initialValue={record ? record['age'] : ''}
            ></FormItem4InputNumber>
            <FormItem4Input
              form={form}
              label={'联系电话'}
              fieldName={'phone'}
              required={false}
              initialValue={record ? record['phone'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'身份证号码'}
              fieldName={'sfz'}
              required={false}
              initialValue={record ? record['sfz'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'地址'}
              fieldName={'addr'}
              required={false}
              initialValue={record ? record['addr'] : ''}
            ></FormItem4Input>
            <FormItem4DatePicker
              form={form}
              label={'内镜诊疗日期'}
              fieldName={'njzlTime'}
              required={false}
              initialValue={
                record && record['njzlTime'] ? moment(record['njzlTime'], 'YYYY-MM-DD') : null
              }
            ></FormItem4DatePicker>
            <FormItem4Select
              form={form}
              label={'诊疗方式'}
              fieldName={'zlFs'}
              required={false}
              items={zlFs}
              initialValue={record ? record['zlFs'] : ''}
            ></FormItem4Select>
            <FormItem4Select
              form={form}
              label={'对象来源'}
              fieldName={'zldxLy'}
              required={false}
              initialValue={record ? record['zldxLy'] : ''}
              items={zldxLy}
            ></FormItem4Select>
          </Row>
          {/* 内镜信息 */}
          <Row gutter={16} style={{ display: activeKey === '2' ? 'block' : 'none' }}>
            <FormItem4Input
              form={form}
              label={'内镜号'}
              fieldName={'njNum'}
              required={false}
              initialValue={record ? record['njNum'] : ''}
            ></FormItem4Input>
            <FormItem4Radio
              form={form}
              label={'是否无痛'}
              fieldName={'ache'}
              required={false}
              initialValue={record ? record['ache'] : ''}
              items={ache}
            ></FormItem4Radio>
            <FormItem4Select
              form={form}
              label={'染色类别'}
              fieldName={'dye'}
              required={false}
              initialValue={record ? record['dye'] : ''}
              items={dye}
            ></FormItem4Select>
            <FormItem4Radio
              form={form}
              label={'是否活检'}
              fieldName={'isHj'}
              required={false}
              initialValue={record ? record['isHj'] : ''}
              items={isHj}
            ></FormItem4Radio>
            <FormItem4Select
              form={form}
              label={'Hp检测结果'}
              fieldName={'hp'}
              required={false}
              initialValue={record ? record['hp'] : ''}
              items={Hp}
            ></FormItem4Select>
            <FormItem4Select
              form={form}
              label={'Hp检测方法'}
              fieldName={'hpjcjg'}
              required={false}
              initialValue={record ? record['hpjcjg'] : ''}
              items={hpjcjg}
            ></FormItem4Select>
            <FormItem4InputNumber
              form={form}
              label={'图像数量'}
              fieldName={'picNums'}
              required={false}
              min={1}
              max={300}
              initialValue={record ? record['picNums'] : ''}
            ></FormItem4InputNumber>
            <FormItem4Input
              form={form}
              label={'内镜诊断医师'}
              fieldName={'njStaff'}
              required={false}
              initialValue={record ? record['njStaff'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'内镜审核医师'}
              fieldName={'verifyStaff'}
              required={false}
              initialValue={record ? record['verifyStaff'] : ''}
            ></FormItem4Input>
            <Col className="gutter-row" span={24}>
              <Col className="gutter-row" span={12}>
                <MFormItem
                  form={form}
                  label={'内镜诊断'}
                  fieldName={'njzd'}
                  required={false}
                  initialValue={record ? record['njzd'] : ''}
                >
                  <div style={{ display: 'flex' }}>
                    <Tabs
                      activeKey={this.state.njActiveKey}
                      tabPosition={'left'}
                      onChange={this.handleNjTabChange}
                    >
                      <TabPane tab={'下咽'} key={'1'}></TabPane>
                      <TabPane tab={'食管'} key={'2'}></TabPane>
                      <TabPane tab={'贲门'} key={'3'}></TabPane>
                      <TabPane tab={'胃'} key={'4'}></TabPane>
                      <TabPane tab={'十二指肠'} key={'5'}></TabPane>
                    </Tabs>
                    <Tree
                      checkable
                      disabled={true}
                      defaultExpandedKeys={['0']}
                      onSelect={this.handleTreeNodeSelect}
                      style={{ marginLeft: '16px' }}
                    >
                      {this.renderTreeNodes(this.props[`tag${this.state.njActiveKey}`][0].children)}
                    </Tree>
                  </div>
                </MFormItem>
              </Col>
            </Col>
          </Row>
          {/* 病理信息 */}
          <Row gutter={16} style={{ display: activeKey === '3' ? 'block' : 'none' }}>
            <FormItem4Input
              form={form}
              label={'病理号'}
              fieldName={'blNum'}
              required={false}
              initialValue={record ? record['blNum'] : ''}
            ></FormItem4Input>
            <FormItem4DatePicker
              form={form}
              label={'病理报告日期'}
              fieldName={'blbgTime'}
              required={false}
              initialValue={
                record && record['blbgTime'] ? moment(record['blbgTime'], 'YYYY-MM-DD') : null
              }
            ></FormItem4DatePicker>
            <FormItem4Select
              form={form}
              label={'食管病理诊断代码'}
              fieldName={'sgblCode'}
              showCode={true}
              required={false}
              initialValue={record ? record['sgblCode'] : ''}
              items={sgblCode}
            ></FormItem4Select>
            <FormItem4Select
              form={form}
              label={'贲门病理诊断代码'}
              fieldName={'bmblCode'}
              showCode={true}
              required={false}
              initialValue={record ? record['bmblCode'] : ''}
              items={bmblCode}
            ></FormItem4Select>
            <FormItem4Select
              form={form}
              label={'胃病理诊断代码'}
              fieldName={'wblCode'}
              required={false}
              showCode={true}
              initialValue={record ? record['wblCode'] : ''}
              items={wblCode}
            ></FormItem4Select>
            <FormItem4Select
              form={form}
              label={'十二指肠病理诊断代码'}
              fieldName={'sezcCode'}
              required={false}
              showCode={true}
              initialValue={record ? record['sezcCode'] : ''}
              items={sezccode}
            ></FormItem4Select>
            <FormItem4Input
              form={form}
              label={'病理诊断医师'}
              fieldName={'blzdStaff'}
              required={false}
              initialValue={record ? record['blzdStaff'] : ''}
            ></FormItem4Input>
            <FormItem4Input
              form={form}
              label={'病理审核医师'}
              fieldName={'blshStaff'}
              required={false}
              initialValue={record ? record['blshStaff'] : ''}
            ></FormItem4Input>
            <Col className="gutter-row" span={24}>
              <Col className="gutter-row" span={12}>
                <MFormItem
                  form={form}
                  label={'病理诊断'}
                  fieldName={'blzd'}
                  required={false}
                  initialValue={record ? record['blzd'] : ''}
                >
                  <TextArea disabled={true} autoComplete="off" placeholder={'请输入'} rows={4}></TextArea>
                </MFormItem>
              </Col>
            </Col>
          </Row>
          {/* 内镜诊断详情 */}
          <Row gutter={16} style={{ display: activeKey == 4 ? 'block' : 'none' }}>
            <EndoscopeDetail
              disabled={true}
              record={record}
              sg={sg}
              bm={bm}
              w={w}
              wrappedComponentRef={endoscopeDetailView =>
                (this.endoscopeDetailView = endoscopeDetailView)
              }
            ></EndoscopeDetail>
          </Row>
        </Card>

        <DivFooter>
          <LFlexHDiv>
            <LFlexHDiv flex={'1'} justifyContent={'center'}>
              <Button
                style={{
                  marginRight: 8,
                  width: '120px',
                }}
                onClick={() => {
                  if (onClose) {
                    onClose();
                  }
                }}
                // loading={this.props.isPosting}
              >
                关闭
              </Button>
            </LFlexHDiv>
          </LFlexHDiv>
        </DivFooter>
      </Drawer>
    );
  }

  handleTabChange = key => {
    this.setState({ activeKey: key });
  };

  handleNjTabChange = key => {
    this.setState({ njActiveKey: key });
  };

  /**
   * 渲染树节点
   * @param data
   * @returns {*}
   */
  renderTreeNodes = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} />;
    });
  };
}

export default DetailView;
